import React, { useState, useEffect } from "react"
import { http, UdModal, UdFilter, UdPageHeader, columnRenders, routeUtils } from '@/lib';
import DetailsModal from "../detailsModal"
import apis from "@/apis/CostManage"
import { downBlobFile } from "@/utils/methods"
import { Button, Table, Statistic } from "antd"
import './style.scss'


//接口字段映射
const fieldMap = {
    /**
     * 表格一
     */

    //营销费用兑现方式
    type: "ExpenseWayCodeAndName",
    //费用总金额
    totalAmount: "Money",
    //已使用金额
    usedAmount: "UsedMoney",
    //转移金额
    transferAmount: "OutMoney",
    //调整金额
    adjustmentAmount: "AdjustMoney",
    //冻结金额
    frozenAmount: "FreezeMoney",
    //可用费用金额
    amountAvailable: "CanUseMoney",

    /**
     * 表格二
     */
    //报销单名称
    name: "AccountName",
    //报销单号
    no: "AccountNumber",
    //报销单年度
    year: "FiscalYearValue",
    //是否调入
    isTransfer: "BlTransferRequestItem",
    //是否冻结
    isFreeze: "BlFreezeMoney",
    //费用类型
    typesOfFee: "ExpenseTypeCodeAndName",
    //金额
    amount: "Money",


}

export default (props: any) => {
    const params = props?.match?.params || { ExpenseWayCode: undefined, BrandCode: undefined }

    const { dealerCode } = routeUtils.searchStringToObject(props.location.search, { dealerCode: undefined })

    const [searchValues, setSearchValues] = useState({})
    const [tableData, setTableData] = useState([])
    const [pagination, setPagination] = useState({
        page: 1, size: 10
    })
    const [total, setTotal] = useState(0)

    const [isLoading, setIsLoading] = useState(false)

    //更新列表数据
    const getList = async () => {
        setIsLoading(true)
        const { page, size } = pagination

        await http.post(apis.getFundsListDetailsList, {
            ...searchValues, ...params, page, size, dealerCode
        }).then(res => {
            setIsLoading(false)
            setTableData(res?.data?.content)
            setTotal(res?.data?.totalElements)
            setPagination({ page: res?.data?.number, size: res?.data?.size })
        }).catch(error => {
            setIsLoading(false)
            setTableData([])
        })
    }

    useEffect(() => {
        getList()
    }, [pagination.page, pagination.size, searchValues])

    //搜索
    const handleSearch = (values) => {
        setSearchValues(values)
    }

    //查看明细
    const hendleDetails = (id) => {
        UdModal.open({
            centered: true,
            width: 900,
            title: "费用使用明细",
            content: <DetailsModal propsId={id} dealerCode={dealerCode} />,
            footer: null,
        })
    }

    //导出表格
    const exportList = () => {

        const { page, size } = pagination

        http.post(apis.exportFundsList, {
            ...searchValues, ...params, page, size, dealerCode
        }, {
            responseType: "arraybuffer"
        }
        ).then(res => {
            if (!res.data.code) {
                downBlobFile(res.data, "费用报销单明细")
            }
        })
    }

    //分页
    const handleChangePage = (page, size) => {
        setPagination({ ...pagination, page, size })
    }

    return <div>
        <UdPageHeader title="费用报销明细" onBack />
        <UdFilter
            items={[
                {
                    id: fieldMap.name,
                    label: "报销单名称"
                }
            ]}
            onSearch={(valus) => { handleSearch(valus) }}
        />
        <Button type="primary" style={{ marginBottom: "10px" }} onClick={exportList}>导出</Button>
        <Table
            className='cost-detail-table nowarp'
            loading={isLoading}
            scroll={{ x: true }}
            rowKey={(record, index) => index + ''}
            columns={[
                {
                    dataIndex: fieldMap.no,
                    title: "报销单号"
                    
                },
                {
                    dataIndex: fieldMap.name,
                    title: "费用报销单",
                    className: 'cost-name',
                },
                {
                    dataIndex: fieldMap.year,
                    title: "报销单年度"
                },
                {
                    dataIndex: fieldMap.isTransfer,
                    title: "是否调入",
                    render: (text, record) => record[fieldMap.isTransfer] ? "是" : "否"
                },
                {
                    dataIndex: fieldMap.isFreeze,
                    title: "是否冻结",
                    render: (text, record) => record[fieldMap.isFreeze] ? "是" : "否"
                },
                {
                    dataIndex: fieldMap.type,
                    title: "营销费用兑现方式"
                },
                {
                    dataIndex: fieldMap.typesOfFee,
                    title: "费用类型",
                    className: 'cost-type',
                },
                {
                    dataIndex: fieldMap.amount,
                    title: "金额",
                    align: 'right',
                    render: (text) => (text || text == 0) && <Statistic value={text} precision={2} />
                },
                {
                    dataIndex: fieldMap.usedAmount,
                    title: "已使用金额",
                    align: 'right',
                    render: (text) => (text || text == 0) && <Statistic value={text} precision={2} />
                },
                {
                    dataIndex: fieldMap.transferAmount,
                    title: "转移金额",
                    align: 'right',
                    render: (text) => (text || text == 0) && <Statistic value={text} precision={2} />
                },
                {
                    dataIndex: fieldMap.adjustmentAmount,
                    title: "调整金额",
                    align: 'right',
                    render: (text) => (text || text == 0) && <Statistic value={text} precision={2} />
                },
                {
                    dataIndex: fieldMap.frozenAmount,
                    title: "冻结金额",
                    align: 'right',
                    render: (text) => (text || text == 0) && <Statistic value={text} precision={2} />
                },
                {
                    dataIndex: fieldMap.amountAvailable,
                    title: "可用费用金额",
                    align: 'right',
                    render: (text) => (text || text == 0) && <Statistic value={text} precision={2} />
                },
                {
                    dataIndex: "dos",
                    title: "操作",
                    width: 100,
                    fixed: 'right',
                    render: columnRenders.operate([
                        { title: '查看使用明细', action: (text, record) => hendleDetails(record.ExpenseId) }
                    ])
                    // render: (text, record: any, index) => <Button type="link" onClick={() => { hendleDetails(record.ExpenseId) }}>查看明细</Button>
                }
            ]}
            dataSource={tableData}
            pagination={{
                current: pagination.page,
                pageSize: pagination.size,
                total: total,
                showQuickJumper: true,
                showSizeChanger: true,
                showTotal: (total, range) => `共${total}项，当前${range[0]}-${range[1]}项`,
                onChange: (page, pageSize) => { handleChangePage(page, pageSize) },
                onShowSizeChange: (current, size) => { handleChangePage(current, size) }
            }}
        />
    </div>
}
